<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据库字段增加</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="layui/css/layui.css">
	</head>
	<body>
		<div class="layui-layout layui-layout-admin">
			<div class="layui-body">
				<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
					<legend>原生SQL</legend>
				</fieldset>
				<form class="layui-form" action="">
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">数据库</label>
							<div class="layui-input-inline">
								<select id="db" lay-filter="db">
								</select>
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">SQL</label>
						<div class="layui-input-block">
							<textarea class="layui-textarea" style="width: 50%;height: 300px;" placeholder="请输入SQL"
								autocomplete="on" name="sql" id="sql" lay-verify="sql"></textarea>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-input-inline">
							<button type="submit" class="layui-btn" lay-submit="" lay-filter="request">立即提交</button>
							<button type="reset" class="layui-btn layui-btn-primary">重置</button>
						</div>
					</div>
				</form>


				<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
					<legend>结果集</legend>
				</fieldset>

				<div class="layui-form-item">
					<table class="layui-table">
						<colgroup>
							<col>
							<col>
							<col>
							<col>
						</colgroup>
						<thead>
							<tr id="th">
							</tr>
						</thead>
						<tbody id="tbody">
						</tbody>
					</table>
				</div>
			</div>
		</div>



		<!-- 注意：项目正式环境请勿引用该地址 -->
		<script src="layui/layui.js" charset="utf-8"></script>

		<script>
			layui.config({
				base: 'js/', //静态资源所在路径
			}).extend({
				index: 'http', //主入口模块
			}).use(['form', 'layedit', 'form', 'jquery', 'element', 'layer', 'http'],
				function() {
					var form = layui.form,
						layer = layui.layer,
						layedit = layui.layedit,
						laydate = layui.laydate,
						element = layui.element,
						api = layui.http.api,
						$ = layui.jquery;
					var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
					console.log(index);
					$.ajax({
						type: 'POST',
						url: api + 'db/getAll',
						dataType: 'json',
						success: function(result) {

							var length = result.data.length;
							var th = '';
							if (length > 0) {
								var list = result.data;
								let option = '';
								for (var i = 0; i < list.length; i++) {
									var db = list[i];
									option = option.concat('<option value="' + db['id'] + '">' + db[
											'url'] +
										'</option>')
								}
								$('#db').append(option);
								form.render();
							};
						},
						error: function(result) {
							layer.msg('网络异常,加载数据库列表失败,稍后重试', {
								icon: 5
							});
						}
					});

					form.verify({
						sql: function(value) {
							if (value == '') {
								return '不能为空';
							}
						}
					});


					var sql = localStorage.getItem("sql");
					$('#sql').val(sql)
					form.on('submit(request)', function(data) {
						var json = JSON.stringify(data.field);
						var sql = $('#sql').val()
						localStorage.setItem("sql", sql);
						$('#th').empty();
						$('#tbody').empty();
						$.ajax({
							type: 'POST',
							url: api + 'loadDb',
							data: {
								'data': JSON.parse(json).sql,
								'id': $('#db').val()
							},
							dataType: 'json',
							success: function(result) {
								if (result.code == 0) {
									var length = result.data.length;
									var th = '';
									if (length > 0) {
										var list = result.data;
										var column = list[0][0];
										let id = parent.$('#db-column').val()
										let option = '';
										for (let key in column) {
											option = option.concat('<option value="' + key + '">' + key +
												'</option>')
											th = th.concat('<th>' + key +
												'</th>')
										}
										console.log(option)
										let dbIndex = parent.$('#db-column-id').val();
										parent.$('#db-column-select-' + dbIndex).append(option);
										parent.$('#db-column').val(option);
										var tbody = '';
										for (let i = 0; i < length; i++) {
											let line = list[i]
											let tr = '<tr>';
											for (let key in line[0]) {
												tr = tr.concat('<td>' + line[0][key] + '</td>')
											}
											tbody = tbody.concat(tr + '</tr>')
										}

										$('#th').append(th);
										$('#tbody').append(tbody);
										parent.$('#file-detail-data-count').val(length);
										parent.$('#dbId').val($('#db').val());
										parent.$('#sql').text(sql);
										
									}
								} else {
									layer.msg('sql不合法: ' + result.msg, {
										icon: 5
									});
								}
							},
							error: function(result) {
								layer.msg('网络异常,稍后重试', {
									icon: 5
								});
							}
						})
						return false;
					})
				});
		</script>

	</body>
</html>
